<template>
	<view class="app-container">
		<view class="gradual-change-bg" />
		<view class="search-box flex">
			<view class="address-box flex" @click="handleTips">
				<image class="icon" src="/static/icons/location-icon.png" />
				<text class="text">西安</text>
			</view>
			<view class="flex-1" @click="handleToPage('/pages/search/index')">
				<uni-search-bar radius="100" placeholder="请输入店名搜索" clearButton="none" cancelButton="none" readonly />
			</view>
		</view>
		<view class="menu-box">
			<view class="menu-list flex">
				<view v-for="item in menuList" :key="item.id" class="menu-item flex-column" hover-class="is-hover"
					@click="handleClickMenu(item)">
					<template v-if="item.id === 4 && store.state.isLogin">
						<button class="share-button" open-type="share">
							<image class="icon" :src="item.icon" mode="widthFix" />
							<text class="text">{{ item.name }}</text>
						</button>
					</template>
					<template v-else>
						<image class="icon" :src="item.icon" mode="widthFix" />
						<text class="text">{{ item.name }}</text>
					</template>
				</view>
			</view>
			<button type="primary" hover-class="is-hover" class="scan-button"
				@click="handleToPage(`/pages/webView/index?url=${config.scanPage}`)">
				<image class="icon" src="/static/icons/scan-icon.png" />
				<view class="text-box">
					<text class="text">扫码上机</text>
					<text class="remark">（目前仅限电竞酒店）</text>
				</view>
			</button>
		</view>
		<view class="tab-list flex">
			<view v-for="item in tabList" :key="item.id" class="tab-item" :class="{ active: activeTab === item.id }"
				@click="handleClickTab(item)">
				{{ item.name }}
			</view>
		</view>
		<swiper class="tab-swiper" :current-item-id="activeTab" @change="handleTabSwiperChange">
			<swiper-item item-id="1">
				<z-paging ref="paging1" class="tab-swiper-item shop-list" :fixed="false" :loading-more-enabled="false"
					v-model="barList" :auto="false" @query="getHomeData">
					<ListItem v-for="item in barList" :key="item.id" :type="1" :data="item" />
				</z-paging>
			</swiper-item>
			<swiper-item item-id="2">
				<z-paging ref="paging2" class="tab-swiper-item shop-list" :fixed="false" :loading-more-enabled="false"
					v-model="goodsList" :auto="false" @query="getHomeData">
					<ListItem v-for="item in goodsList" :key="item.id" :type="2" :data="item" />
				</z-paging>
			</swiper-item>
			<swiper-item item-id="3">
				<z-paging ref="paging3" class="tab-swiper-item shop-list" :fixed="false" :loading-more-enabled="false"
					v-model="activityList" :auto="false" @query="getHomeData">
					<ActivityItem v-for="item in activityList" :key="item.id" :data="item" />
				</z-paging>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		nextTick
	} from "vue";
	import {
		listHomeData,
		getPlayAppId
	} from "@/api";
	import {
		openSetting
	} from "@/utils";
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import config from "@/config";
	import store from "@/store";
	import {
		showNotLoginModal
	} from "@/utils";

	const paging1 = ref(null);
	const paging2 = ref(null);
	const paging3 = ref(null);

	const state = reactive({
		menuList: [{
				id: 1,
				name: "每日签到",
				icon: "/static/images/sign-up-icon.png",
				url: "/pages/signIn/index"
			}, {
				id: 2,
				name: "附近网吧",
				icon: "/static/images/internet-bar-icon.png",
				url: "/pages/bar/list"
			},
			{
				id: 3,
				name: "电竞酒店",
				icon: "/static/images/hotel-icon.png",
				url: "/pages/hotel/list"
			},
			{
				id: 4,
				name: "邀请有礼",
				icon: "/static/images/gift-icon.png",
				url: ""
			}
		],
		activeTab: "1",
		tabList: [{
				id: "1",
				name: "推荐"
			},
			{
				id: "2",
				name: "商品"
			},
			{
				id: "3",
				name: "活动"
			},
			{
				id: "4",
				name: "维护通知"
			},
			{
				id: "5",
				name: "找陪玩"
			}
		],
		queryParams: {
			lat: "",
			lng: ""
		},
		barList: [],
		goodsList: [],
		activityList: []
	})

	const {
		menuList,
		activeTab,
		tabList,
		queryParams,
		barList,
		goodsList,
		activityList
	} = toRefs(state)

	// 点击菜单
	async function handleClickMenu(item) {
		if ([1, 4].includes(item.id) && !store.state.isLogin) {
			return showNotLoginModal();
		}
		uni.navigateTo({
			url: item.url
		})
	}

	// 点击tab切换
	async function handleClickTab(item) {
		if (item.id === "4") {
			uni.setStorageSync("activeTab", 2)
			uni.switchTab({
				url: "/pages/activity/list"
			})
			return;
		}
		if (item.id === "5") {
			// 获取陪玩小程序AppId
			const res = await getPlayAppId();
			uni.openEmbeddedMiniProgram({
				appId: res.data.appid,
				path: res.data.page,
				fail: (error) => {
					if(error.errMsg.indexOf("invalid appid") !== -1) {
						uni.showToast({
							title: "无效的AppId",
							icon: "none"
						})
					}
				}
			})
			return;
		}
		activeTab.value = item.id;
	}

	// tab轮播切换
	function handleTabSwiperChange(e) {
		activeTab.value = e.detail.currentItemId;
	}

	// 获取首页数据
	async function getHomeData() {
		const res = await listHomeData(queryParams.value);
		res.data.barList.forEach(item => {
			item.flags = item.flags ? item.flags.split(",") : ""
		})
		paging1.value.complete(res.data.barList);
		paging2.value.complete(res.data.goodsList);
		paging3.value.complete(res.data.activityList);
	}

	// 点击提示
	function handleTips() {
		uni.showToast({
			title: "暂不支持其它城市",
			icon: "none"
		})
	}

	onLoad(async (option) => {
		activeTab.value = option.activeTab || "1";
		if (uni.getSystemInfoSync().platform === "devtools") {
			// 微信开发者工具无法获取定位
			getHomeData();
			return;
		}
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				queryParams.value.lat = res.latitude.toFixed(6);
				queryParams.value.lng = res.longitude.toFixed(6);
				getHomeData();
			},
			fail: async (err) => {
				await openSetting();
				getHomeData();
			}
		});
	})

	onShow(async () => {
		store.dispatch("GetUserInfo");
	})

	onShareAppMessage(async (res) => {
		let title = "";
		let path = "";
		const result = await store.dispatch("GetUserInfo");
		const userInfo = result.data;
		const inviteCode = userInfo.invite_code;
		const username = userInfo.username;
		if (res.from === 'button') {
			// 点击分享有礼按钮
			title = "邀请有礼";
			path = `/pages/user/login?type=share&username=${username}&ic=${inviteCode}`;
		} else {
			title = "小优电竞";
			path = "/pages/home/index";
		}
		return {
			title: title,
			path: path
		}
	})
</script>

<style scoped lang="scss">
	.app-container {
		position: relative;

		.gradual-change-bg {
			height: 250rpx;
			background: linear-gradient(0deg, #F2F4F7 0%, var(--primary-color) 50%, var(--primary-color) 100%);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.search-box {
			color: #FFFFFF;
			padding: 0 33rpx 0 20rpx;
			height: 110rpx;
			column-gap: 27rpx;
			z-index: 1;
			background-color: var(--primary-color);

			.address-box {
				column-gap: 15rpx;

				.icon {
					width: 28rpx;
					height: 30rpx;
				}

				.text {
					font-size: 30rpx;
				}
			}

			::v-deep .uni-searchbar {
				.uni-searchbar__box {
					background-color: rgba(255, 255, 255, 0.1) !important;

					.uni-searchbar__box-icon-search {
						.uniui-search {
							color: #7FAAFF !important;
						}
					}

					.uni-searchbar__text-placeholder {
						color: #7FAAFF !important;
					}

					.uni-searchbar__box-search-input {
						color: #FFFFFF;

						.input-placeholder {
							color: #7FAAFF !important;
						}
					}
				}
			}
		}

		.menu-box {
			height: 330rpx;
			background-color: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 50rpx 34rpx 0;
			z-index: 1;

			.menu-list {
				justify-content: space-between;
				margin-bottom: 50rpx;

				.menu-item {
					align-items: center;
					row-gap: 10rpx;

					.icon {
						width: 60rpx;
						max-height: 79rpx;
					}

					.share-button {
						display: flex;
						flex-direction: column;
						background-color: unset;
						height: unset;
						border-radius: 0;
						row-gap: 10rpx;
						padding: 0;

						.icon {
							height: 79rpx !important;
							flex-shrink: 0;
						}

						.text {
							line-height: 1;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
			
			.scan-button {
				height: 100rpx;
				line-height: 100rpx;
				
				.text-box {
					display: flex;
					flex-direction: column;
					height: 100%;
					
					.text {
						line-height: 50rpx;
						margin-top: 10rpx;
					}
					
					.remark {
						line-height: 30rpx;
						font-size: 20rpx;
					}
				}
			}
		}

		.tab-list {
			margin: 0 30rpx;
			height: 106rpx;
			column-gap: 50rpx;

			.tab-item {
				font-size: 28rpx;
				color: #808080;

				&.active {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					position: relative;
					transition: all 0.5s;

					&::after {
						content: "";
						display: block;
						position: absolute;
						bottom: -10rpx;
						left: 0;
						right: 0;
						margin: auto;
						width: 30rpx;
						height: 6rpx;
						border-radius: 3rpx;
						background-color: var(--primary-color);
					}
				}
			}
		}

		.tab-swiper {
			flex: 1;
			overflow: hidden;
			padding: 0 20rpx;

			.tab-swiper-item.shop-list {
				height: 100%;
			}
		}
	}
</style>